/* eslint-disable no-underscore-dangle */
import React from 'react';
import { inject } from 'mobx-react';
import { Tooltip } from 'choerodon-ui/pro';
import { Tag } from 'choerodon-ui';
import moment from 'moment';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { handleCopyOk, getcurlText } from '../../utils';
import { dateData } from '../../routes/deployment-operation/components/trigger-plan-form/formDataSet';
import { triggerModeData } from '../../routes/deployment-operation/components/trigger-plan-form';
import './index.less';

interface IProps {
  basicConfigurationData: any
  personalToken: string
}

const Index: React.FC<IProps> = (props) => {
  const {
    basicConfigurationData,
    // @ts-ignore
    AppState: { currentMenuType: { projectId } }, personalToken,
  } = props;

  const curlText = getcurlText(basicConfigurationData.token, personalToken, projectId);

  const renderScheduleList = () => {
    const list = basicConfigurationData.pipelineScheduleList;
    return list.length ? list.map((item: any) => {
      let weekText = '';
      const weeksArr = item.weekNumber.split(',');
      weeksArr.forEach((i: string) => {
        weekText += `${dateData.find((k) => k.value === i)?.text}，`;
      });
      weekText = weekText.substring(0, weekText.length - 1);
      const itemTriggerType = item.triggerType;
      const itemTimeRange = item.timeRange;
      const itemtriggerTypeText = triggerModeData
        .find((i: { value: any; }) => i.value === itemTriggerType)?.text;
      if (itemTriggerType === 'single') {
        return (
          <div className="row-item-content-timingTrigger">
            <div>
              <Tag color="rgba(15, 19, 88, 0.06)">{itemtriggerTypeText}</Tag>
            </div>
            <div>
              {`${weekText} / ${moment(item.executeTime).format('HH:mm')}`}
            </div>
          </div>
        );
      } if (itemTriggerType === 'period') {
        return (
          <div className="row-item-content-timingTrigger">
            <div>
              <Tag color="rgba(15, 19, 88, 0.06)">{itemtriggerTypeText}</Tag>
            </div>
            <div style={{ whiteSpace: 'normal' }}>
              {`${weekText} /`}
            </div>
            <div>
              {`${moment(itemTimeRange.start).format('h')}:00 ~ ${moment(itemTimeRange.end).format('h')}:00`}
            </div>
            <div>
              间隔
              {item.period}
              分钟
            </div>
          </div>
        );
      }
      return '';
    }) : '-';
  };

  return (
    <main className="c7ncd-continuous-deployment-basic-configuration-card">
      <div className="row-item">
        <span className="row-item-label">名称：</span>
        <Tooltip
          title={basicConfigurationData.name}
        >
          <span className="row-item-content">{basicConfigurationData.name || '-'}</span>
        </Tooltip>
      </div>
      <div className="row-item">
        <span className="row-item-label">定时触发：</span>
        <span className="row-item-content">
          {renderScheduleList()}
        </span>
      </div>
      <div className="row-item">
        <span className="row-item-label">API触发:</span>
        <CopyToClipboard
          text={curlText}
          onCopy={handleCopyOk}
        >
          <span
            className="row-item-content copy-text"
            role="none"
            onClick={(e) => {
              e.nativeEvent.stopImmediatePropagation();
              e.stopPropagation();
            }}
          >
            复制curl命令
          </span>
        </CopyToClipboard>

      </div>
      <div className="row-item">
        <span className="row-item-label">
          应用服务版本
          生成触发：
        </span>
        <span className="row-item-content">
          {
            basicConfigurationData.appVersionTriggerEnable ? '是' : '否'
          }
        </span>
      </div>
    </main>
  );
};

export default inject('AppState')(Index);
